<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的运动框架 demo</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.div1{width: 100px; height: 100px; position: absolute; top:160px; left:0px; background: green;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">javascript 简单的运动框架！</h2>
	<div class="wrap-main">
		<!--内容写这里-->
		<input type="button" id="btn1" value="运动">
		<div class="div1" id="div1"></div>
	</div>
</div>
<script>
window.onload = function ()
{
	var oBtn = document.getElementById("btn1");
	var oBox = document.getElementById("div1");
	
	oBtn.onclick = function ()
	{
		startMove(300);	
	}
	
}

var timer = null;

function startMove(iTarget)
{
	var oBox = document.getElementById("div1");
	clearInterval(timer);
	
	timer = setInterval(function(){
		var iSpeed = (oBox.offsetLeft) > iTarget ? -10 : 10;
		
		if (oBox.offsetLeft == iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oBox.style.left = oBox.offsetLeft + iSpeed +'px';
		}
	},30)
}

</script>
</body>
</html>
